/**
 * @author lulongwen
 * Date: 2023-08-27 15:44
 * Description:
 */

// import React from 'react';
// import PropTypes from 'prop-types';
import { Card, Row, Col } from 'antd';
import {
  NodeResizer,
  NodeToolbar,
  CustomButton,
  CustomNode,
} from '@/components';

const dataSource = [
  {
    title: '节点缩放',
    name: 'NodeResizer',
    component: NodeResizer,
  },
  {
    title: '节点工具栏',
    name: 'NodeToolbar',
    component: NodeToolbar,
  },
  {
    title: '自定义按钮',
    name: 'CustomButton',
    component: CustomButton,
  },
  {
    title: '自定义卡片',
    name: 'CustomNode',
    component: CustomNode,
  },
];

ReactflowApi.propTypes = {};

function ReactflowApi() {
  return (
    <Row gutter={[24, 24]}>
      {dataSource.map((item, i) => {
        return <ApiItem {...item} key={i} />;
      })}
    </Row>
  );
}

export default ReactflowApi;

const bodyStyle = { height: 260 };

function ApiItem(props: any) {
  const { name, title, component } = props;
  const Element = component;

  return (
    <Col span={8}>
      <Card
        title={`${name} ${title}`}
        bodyStyle={bodyStyle}
      >
        <Element
          thumbnail
        />
      </Card>
    </Col>
  );
}
